<template>
    <!-- 游戏容器的外层 div -->
    <div class="game-container">
      <!-- 显示游戏状态的 div，包括得分、蛇的长度和剩余生命 -->
      <div class="status">
        <div class="user-info" v-if="currentUser">
          👤 {{ currentUser.username }} | 
        </div>
        得分: {{ score }} | 长度: {{ snake.length }} | 剩余生命: ❤️{{ lives }}
        <span v-if="speedEffectTime > 0" class="speed-effect">
          | 速度效果: {{ speedEffectTime }}秒
        </span>
        <span v-if="isPaused" class="pause-status">
          | ⏸️ 游戏暂停
        </span>
        <br>
        <span class="current-food">当前食物数量: {{ foods.length }}/{{ maxFoods }}</span>
        <span class="difficulty-info"> | 难度: {{ difficulties[difficulty].name }}</span>
        <span class="skin-info"> | 皮肤: {{ skins[currentSkin].name }}</span>
      </div>
  
      <!-- 游戏棋盘的 div，根据计算属性设置样式 -->
      <div class="game-board" :style="boardStyle">
        <!-- 循环渲染蛇的每一段 -->
        <div 
          v-for="(segment, index) in snake" 
          :key="index"
          class="snake-segment"
          :style="getSegmentStyle(segment)"
        ></div>
        <!-- 循环渲染所有食物 -->
        <div 
          v-for="food in foods" 
          :key="food.id"
          class="food" 
          :style="getFoodStyle(food)"
        >
          {{ foodTypes[food.type].emoji }}
        </div>
      </div>
  
      <!-- 游戏控制按钮的 div -->
      <div class="controls">
        <!-- 难度选择 -->
        <div class="difficulty-select">
          <span>难度：</span>
          <button 
            v-for="(item, key) in difficulties" 
            :key="key" 
            :style="{background: key === difficulty ? item.color : '#fff', color: key === difficulty ? '#fff' : '#333'}"
            @click="changeDifficulty(key)"
          >{{ item.name }}</button>
        </div>
        <!-- 皮肤切换 -->
        <div class="skin-select">
          <span>皮肤：</span>
          <button 
            v-for="(item, key) in skins" 
            :key="key" 
            :style="{background: key === currentSkin ? item.color : '#fff', color: key === currentSkin ? '#fff' : '#333'}"
            @click="changeSkin(key)"
          >{{ item.name }}</button>
        </div>
        <!-- 开始新游戏的按钮，点击时调用 startGame 方法 -->
        <button @click="startGame">新游戏</button>
        <!-- 暂停/恢复游戏按钮 -->
        <button @click="togglePause" :class="{ 'pause-btn': isPaused }">
          {{ isPaused ? '▶️ 恢复' : '⏸️ 暂停' }}
        </button>
        <!-- 排行榜按钮 -->
        <button @click="toggleLeaderboard">{{ showLeaderboard ? '隐藏排行榜' : '显示排行榜' }}</button>
        <!-- 清空排行榜按钮 -->
        <button @click="clearLeaderboard" class="clear-btn">清空排行榜</button>
        <!-- 方向键按钮的 div -->
        <div class="arrows">
          <!-- 监听点击事件，当用户点击对应的箭头按钮后，跳转到对应的函数处理 -->
          <button @click="changeDirection('up')">↑</button>
          <button @click="changeDirection('left')">←</button>
          <button @click="changeDirection('right')">→</button>
          <button @click="changeDirection('down')">↓</button>
        </div>
      </div>
      
      <!-- 排行榜显示区域 -->
      <div v-if="showLeaderboard" class="leaderboard">
        <h3>🏆 全局排行榜</h3>
        <div v-if="leaderboard.length === 0" class="no-records">
          暂无记录，开始游戏创造记录吧！
        </div>
        <div v-else class="leaderboard-list">
          <div 
            v-for="(record, index) in leaderboard" 
            :key="record.id"
            class="leaderboard-item"
            :class="{ 'top-three': index < 3 }"
          >
            <div class="rank">{{ index + 1 }}</div>
            <div class="score">{{ record.score }}分</div>
            <div class="details">
              <span>长度: {{ record.length }}</span>
              <span>生命: {{ record.lives }}</span>
            </div>
            <div class="date">{{ record.date }}</div>
          </div>
        </div>
      </div>
      
      <!-- 食物说明 -->
      <div class="food-info">
        <h3>食物类型说明：</h3>
        <div class="food-types">
          <span class="food-item">🍎 普通食物: +10分</span>
          <span class="food-item">🚀 加速食物: +15分，蛇速提升2秒</span>
          <span class="food-item">🛑 减速食物: +20分，蛇速降低2秒</span>
          <span class="food-item">❤️ 生命食物: +5分，+1生命</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // 从 Vue 中导入需要的响应式 API 和生命周期钩子函数
  import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
  
  export default {
    setup() {
      // ============= 状态声明 =============
      // 棋盘的网格大小，使用 ref 创建响应式数据
      const gridSize = ref(20)
      // 蛇的身体部分，使用 reactive 创建响应式数组对象
      const snake = reactive([{ x: 5, y: 5 }])
      // 食物数组，使用 reactive 创建响应式数组，包含多个食物
      const foods = reactive([])
      // 蛇的移动方向，使用 ref 创建响应式数据
      const direction = ref('right')
      // 玩家的得分，使用 ref 创建响应式数据
      const score = ref(0)
      // 玩家的剩余生命，使用 ref 创建响应式数据
      const lives = ref(3)
      // 游戏循环的定时器 ID，使用 ref 创建响应式数据
      const gameLoop = ref(null)
      // 当前游戏速度，使用 ref 创建响应式数据
      const gameSpeed = ref(200)
      // 速度效果剩余时间，使用 ref 创建响应式数据
      const speedEffectTime = ref(0)
      // 速度效果定时器，使用 ref 创建响应式数据
      const speedEffectTimer = ref(null)
      // 最大食物数量，使用 ref 创建响应式数据
      const maxFoods = ref(4)
      // 排行榜数据，使用 ref 创建响应式数据
      const leaderboard = ref([])
      // 是否显示排行榜，使用 ref 创建响应式数据
      const showLeaderboard = ref(false)
      // 游戏是否暂停，使用 ref 创建响应式数据
      const isPaused = ref(false)
      // 游戏难度，使用 ref 创建响应式数据
      const difficulty = ref('medium')
      // 当前皮肤，使用 ref 创建响应式数据
      const currentSkin = ref('classic')
      // 账号信息，使用 ref 创建响应式数据
      const currentUser = ref(null)
      // 是否显示登录界面，使用 ref 创建响应式数据
      const showLogin = ref(false)
      // 是否显示注册界面，使用 ref 创建响应式数据
      const showRegister = ref(false)
      // 登录表单数据
      const loginForm = reactive({
        username: '',
        password: ''
      })
      // 注册表单数据
      const registerForm = reactive({
        username: '',
        password: '',
        confirmPassword: ''
      })
  
      // 食物类型定义
      const foodTypes = {
        normal: { emoji: '🍎', points: 10, color: '#ff6b6b', effect: 'none' },
        speed: { emoji: '🚀', points: 15, color: '#ff4757', effect: 'speed' },
        slow: { emoji: '🛑', points: 20, color: '#3742fa', effect: 'slow' },
        life: { emoji: '❤️', points: 5, color: '#ff6b9d', effect: 'life' }
      }
      
      // 难度定义
      const difficulties = {
        easy: { name: '简单', speed: 300, color: '#4CAF50' },
        medium: { name: '中等', speed: 200, color: '#FF9800' },
        hard: { name: '困难', speed: 100, color: '#F44336' }
      }
      
      // 皮肤定义
      const skins = {
        classic: { name: '经典绿蛇', color: '#4CAF50', gradient: 'linear-gradient(45deg, #4CAF50, #45a049)' },
        fire: { name: '火焰皮肤', color: '#FF5722', gradient: 'linear-gradient(45deg, #FF5722, #FF9800, #FFC107)' },
        rainbow: { name: '彩虹渐变', color: '#9C27B0', gradient: 'linear-gradient(45deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #9400D3)' }
      }
  
      // ============= 计算属性 =============
      // 计算游戏棋盘的样式，返回一个对象，包含宽度、高度、边框等样式属性
      // 1. computed 函数的使用：computed 是 Vue 框架中提供的一个函数，它用于创建计算属性。计算属性是一种基于其他响应式数据（如响应式对象的属性、响应式数组等）的衍生状态。
      // 计算属性具有缓存机制，只有当它所依赖的响应式数据发生变化时，才会重新计算其值，否则会直接返回缓存的结果。这有助于提高性能，避免不必要的重复计算。
      // 2. 传递给 computed 函数的是一个箭头函数 () => ({ })。这个箭头函数的作用是定义计算属性 boardStyle 的计算逻辑。
      const boardStyle = computed(() => ({
        width: `${gridSize.value * 30}px`,
        height: `${gridSize.value * 30}px`,
        border: '2px solid #333',
        position: 'relative',
        margin: '20px auto'
      }))
  
      // 计算食物的样式，包括颜色
      const foodStyle = computed(() => ({
        left: `${food.x * 30}px`,
        top: `${food.y * 30}px`,
        color: foodTypes[food.type].color,
        filter: speedEffectTime.value > 0 ? 'drop-shadow(0 0 5px currentColor)' : 'none'
      }))
      
      // 获取单个食物样式的方法
      const getFoodStyle = (food) => ({
        left: `${food.x * 30}px`,
        top: `${food.y * 30}px`,
        color: foodTypes[food.type].color,
        filter: speedEffectTime.value > 0 ? 'drop-shadow(0 0 5px currentColor)' : 'none'
      })
  
      // ============= 游戏方法 =============
      // 生成单个食物的方法，随机设置食物的位置和类型并确保不在蛇身上
      const spawnSingleFood = () => {
        // 随机选择食物类型，普通食物概率更高
        const random = Math.random()
        let foodType
        if (random < 0.6) {
          foodType = 'normal'
        } else if (random < 0.75) {
          foodType = 'speed'
        } else if (random < 0.9) {
          foodType = 'slow'
        } else {
          foodType = 'life'
        }
        
        // 生成随机位置
        let newX, newY
        do {
          newX = Math.floor(Math.random() * gridSize.value)
          newY = Math.floor(Math.random() * gridSize.value)
        } while (
          snake.some(seg => seg.x === newX && seg.y === newY) ||
          foods.some(food => food.x === newX && food.y === newY)
        )
        
        // 返回新食物对象
        return {
          x: newX,
          y: newY,
          type: foodType,
          id: Date.now() + Math.random() // 唯一ID
        }
      }
      
      // 生成食物的方法，确保页面上有足够的食物
      const spawnFood = () => {
        // 如果食物数量少于最大数量，生成新食物
        while (foods.length < maxFoods.value) {
          foods.push(spawnSingleFood())
        }
      }
      
      // 移除指定食物的方法
      const removeFood = (foodId) => {
        const index = foods.findIndex(food => food.id === foodId)
        if (index !== -1) {
          foods.splice(index, 1)
        }
      }
      
      // 保存排行榜到本地存储
      const saveLeaderboard = () => {
        localStorage.setItem('snakeLeaderboard', JSON.stringify(leaderboard.value))
      }
      
      // 从本地存储加载排行榜
      const loadLeaderboard = () => {
        const saved = localStorage.getItem('snakeLeaderboard')
        if (saved) {
          leaderboard.value = JSON.parse(saved)
        }
      }
      
      // 添加新记录到排行榜
      const addToLeaderboard = (score, length, lives) => {
        const newRecord = {
          id: Date.now(),
          score: score,
          length: length,
          lives: lives,
          date: new Date().toLocaleString('zh-CN'),
          timestamp: Date.now()
        }
        
        leaderboard.value.push(newRecord)
        // 按分数降序排序，保留前10名
        leaderboard.value.sort((a, b) => b.score - a.score)
        leaderboard.value = leaderboard.value.slice(0, 10)
        
        saveLeaderboard()
      }
      
      // 切换排行榜显示状态
      const toggleLeaderboard = () => {
        showLeaderboard.value = !showLeaderboard.value
      }
      
      // 清空排行榜
      const clearLeaderboard = () => {
        if (confirm('确定要清空排行榜吗？')) {
          leaderboard.value = []
          localStorage.removeItem('snakeLeaderboard')
        }
      }
      
      // 暂停/恢复游戏
      const togglePause = () => {
        isPaused.value = !isPaused.value
        
        if (isPaused.value) {
          // 暂停游戏
          clearInterval(gameLoop.value)
        } else {
          // 恢复游戏
          gameLoop.value = setInterval(move, gameSpeed.value)
        }
      }
      
      // 切换难度
      const changeDifficulty = (newDifficulty) => {
        difficulty.value = newDifficulty
        // 如果游戏正在进行，更新速度
        if (gameLoop.value && !isPaused.value) {
          clearInterval(gameLoop.value)
          gameSpeed.value = difficulties[difficulty.value].speed
          gameLoop.value = setInterval(move, gameSpeed.value)
        }
      }
      
      // 切换皮肤
      const changeSkin = (newSkin) => {
        currentSkin.value = newSkin
      }
      
      // 用户注册
      const register = (username, password) => {
        const users = JSON.parse(localStorage.getItem('snakeUsers') || '[]')
        
        if (users.find(user => user.username === username)) {
          alert('用户名已存在！')
          return false
        }
        
        const newUser = {
          id: Date.now(),
          username,
          password,
          createdAt: new Date().toISOString(),
          scores: []
        }
        
        users.push(newUser)
        localStorage.setItem('snakeUsers', JSON.stringify(users))
        
        currentUser.value = newUser
        showRegister.value = false
        alert('注册成功！')
        return true
      }
      
      // 用户登录
      const login = (username, password) => {
        const users = JSON.parse(localStorage.getItem('snakeUsers') || '[]')
        const user = users.find(u => u.username === username && u.password === password)
        
        if (user) {
          currentUser.value = user
          showLogin.value = false
          alert('登录成功！')
          return true
        } else {
          alert('用户名或密码错误！')
          return false
        }
      }
      
      // 用户登出
      const logout = () => {
        currentUser.value = null
        alert('已登出！')
      }
      
      // 保存用户成绩
      const saveUserScore = (score, length, lives) => {
        if (!currentUser.value) return
        
        const users = JSON.parse(localStorage.getItem('snakeUsers') || '[]')
        const userIndex = users.findIndex(u => u.id === currentUser.value.id)
        
        if (userIndex !== -1) {
          const newScore = {
            id: Date.now(),
            score,
            length,
            lives,
            date: new Date().toLocaleString('zh-CN'),
            timestamp: Date.now()
          }
          
          users[userIndex].scores.push(newScore)
          // 按分数排序，保留前10名
          users[userIndex].scores.sort((a, b) => b.score - a.score)
          users[userIndex].scores = users[userIndex].scores.slice(0, 10)
          
          localStorage.setItem('snakeUsers', JSON.stringify(users))
          currentUser.value = users[userIndex]
        }
      }
      
      // 处理登录表单提交
      const handleLogin = () => {
        if (login(loginForm.username, loginForm.password)) {
          // 清空表单
          loginForm.username = ''
          loginForm.password = ''
        }
      }
      
      // 处理注册表单提交
      const handleRegister = () => {
        if (registerForm.password !== registerForm.confirmPassword) {
          alert('两次输入的密码不一致！')
          return
        }
        
        if (register(registerForm.username, registerForm.password)) {
          // 清空表单
          registerForm.username = ''
          registerForm.password = ''
          registerForm.confirmPassword = ''
        }
      }
  
      // 应用速度效果的方法
      const applySpeedEffect = (effect) => {
        clearTimeout(speedEffectTimer.value)
        speedEffectTime.value = 2
        
        const baseSpeed = difficulties[difficulty.value].speed
        
        if (effect === 'speed') {
          gameSpeed.value = Math.max(50, baseSpeed / 2) // 加速，但不低于50ms
        } else if (effect === 'slow') {
          gameSpeed.value = baseSpeed * 2 // 减速
        }
        
        // 重新启动游戏循环
        clearInterval(gameLoop.value)
        gameLoop.value = setInterval(move, gameSpeed.value)
        
        // 2秒后恢复正常速度
        speedEffectTimer.value = setTimeout(() => {
          gameSpeed.value = baseSpeed
          speedEffectTime.value = 0
          clearInterval(gameLoop.value)
          gameLoop.value = setInterval(move, gameSpeed.value)
        }, 2000)
      }
  
      // 处理食物效果的方法
      const handleFoodEffect = (foodType) => {
        const foodInfo = foodTypes[foodType]
        score.value += foodInfo.points
        
        switch (foodInfo.effect) {
          case 'speed':
            applySpeedEffect('speed')
            break
          case 'slow':
            applySpeedEffect('slow')
            break
          case 'life':
            lives.value++
            break
        }
      }
  
      // 检查碰撞的方法，判断传入的位置是否与边界或蛇自身碰撞
      const checkCollision = (pos) => {
        return (
          pos.x < 0 || 
          pos.x >= gridSize.value || 
          pos.y < 0 || 
          pos.y >= gridSize.value ||
          snake.some(seg => seg.x === pos.x && seg.y === pos.y)
        )
      }
  
      // 移动蛇的方法，根据当前方向移动蛇头，处理碰撞、吃食物等逻辑
      const move = () => {
        // 如果游戏暂停，不执行移动
        if (isPaused.value) return
        
        const head = { ...snake[0] }
        
        switch(direction.value) {
          case 'up': head.y--; break
          case 'down': head.y++; break
          case 'left': head.x--; break
          case 'right': head.x++; break
        }
  
        if (checkCollision(head)) {
          lives.value--
          if (lives.value <= 0) {
            // 游戏结束时保存成绩
            addToLeaderboard(score.value, snake.length, lives.value)
            saveUserScore(score.value, snake.length, lives.value)
            alert(`游戏结束！最终得分: ${score.value}`)
            startGame()
          }
          return
        }
 
        // 检查是否吃到食物
        const eatenFoodIndex = foods.findIndex(food => food.x === head.x && food.y === head.y)
        if (eatenFoodIndex !== -1) {
          const eatenFood = foods[eatenFoodIndex]
          handleFoodEffect(eatenFood.type)
          removeFood(eatenFood.id)
          // 生成新食物补充
          spawnFood()
        } else {
          snake.pop()
        }
  
        snake.unshift(head)
      }
  
      // 开始游戏的方法，重置游戏状态并启动游戏循环
      const startGame = () => {
        clearInterval(gameLoop.value)
        clearTimeout(speedEffectTimer.value)
        snake.splice(0, snake.length, { x: 5, y: 5 })
        direction.value = 'right'
        score.value = 0
        lives.value = 3
        gameSpeed.value = difficulties[difficulty.value].speed
        speedEffectTime.value = 0
        isPaused.value = false // 重置暂停状态
        // 清空食物数组并生成初始食物
        foods.splice(0, foods.length)
        spawnFood()
        gameLoop.value = setInterval(move, gameSpeed.value)
      }
  
      // 改变蛇移动方向的方法，确保不会反向移动
      const changeDirection = (newDir) => {
        // 如果游戏暂停，不允许改变方向
        if (isPaused.value) return
        
        const opposite = {
          up: 'down', down: 'up',
          left: 'right', right: 'left'
        }
        if (newDir !== opposite[direction.value]) {
          direction.value = newDir
        }
      }
  
      // 获取蛇每一段样式的方法，返回一个对象，包含位置、背景颜色等样式属性
      const getSegmentStyle = (segment) => {
        const skin = skins[currentSkin.value]
        return {
          left: `${segment.x * 30}px`,
          top: `${segment.y * 30}px`,
          background: skin.gradient,
          width: '28px',
          height: '28px',
          position: 'absolute',
          transition: 'all 0.2s ease-in-out',
          borderRadius: '4px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
        }
      }
  
      // ============= 生命周期 =============
      // 组件挂载完成后的钩子函数，启动游戏并绑定键盘事件
      onMounted(() => {
        loadLeaderboard() // 加载排行榜
        startGame()
        
        window.addEventListener('keydown', (e) => {
          const dirMap = {
            ArrowUp: 'up',
            ArrowDown: 'down',
            ArrowLeft: 'left',
            ArrowRight: 'right'
          }
          if (dirMap[e.key]) changeDirection(dirMap[e.key])
          
          // 空格键暂停/恢复游戏
          if (e.key === ' ') {
            e.preventDefault() // 防止页面滚动
            togglePause()
          }
        })
      })
  
      // 组件卸载前的钩子函数，清除游戏循环定时器
      onBeforeUnmount(() => {
        clearInterval(gameLoop.value)
        clearTimeout(speedEffectTimer.value)
      })
  
      // ============= 暴露给模板 =============
      // 将需要在模板中使用的状态、计算属性和方法返回
      return {
        // 状态
        snake,
        score,
        lives,
        foods,
        maxFoods,
        speedEffectTime,
        // 常量
        foodTypes,
        difficulties,
        skins,
        // 计算属性
        boardStyle,
        foodStyle,
        // 方法
        startGame,
        changeDirection,
        getSegmentStyle,
        getFoodStyle,
        spawnFood,
        togglePause,
        changeDifficulty,
        changeSkin,
        leaderboard,
        showLeaderboard,
        toggleLeaderboard,
        clearLeaderboard,
        addToLeaderboard,
        isPaused,
        difficulty,
        currentSkin
      }
    }
  }
  </script>
  
  <style scoped>
  /* 游戏容器的样式，设置字体、文本对齐方式和渐变背景 */
  .game-container {
    font-family: Arial, sans-serif;
    text-align: center;
    background: linear-gradient(135deg, #ffe6f2 0%, #e0c3fc 100%);
    padding: 20px;
    border-radius: 10px;
    min-height: 100vh;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
  }
  
  /* 游戏状态显示区域的样式，设置底部外边距和字体大小 */
  .status {
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #333;
  }
  
  /* 游戏控制按钮区域的样式，设置顶部外边距 */
  .controls {
    margin-top: 20px;
  }
  
  /* 按钮的样式，设置内边距、外边距、字体大小和鼠标指针样式 */
  button {
    padding: 10px 15px;
    margin: 0 5px;
    font-size: 1em;
    cursor: pointer;
    background-color: #ffb3d9; /* 稍深的粉色按钮 */
    border: 2px solid #ff80bf;
    border-radius: 5px;
    color: #333;
    transition: all 0.3s;
  }
  
  /* 按钮悬停效果 */
  button:hover {
    background-color: #ff80bf;
    transform: scale(1.05);
  }
  
  /* 食物的样式，设置绝对定位、字体大小和过渡效果 */
  .food {
    position: absolute;
    font-size: 24px;
    transition: all 0.3s;
    animation: food-pop 0.4s;
  }
  
  /* 速度效果显示的样式 */
  .speed-effect {
    color: #ff4757;
    font-weight: bold;
    animation: pulse 1s infinite;
  }
  
  /* 当前食物显示的样式 */
  .current-food {
    color: #333;
    font-size: 0.9em;
    font-weight: bold;
  }
  
  /* 暂停状态显示的样式 */
  .pause-status {
    color: #ff6b6b;
    font-weight: bold;
    animation: pulse 1s infinite;
  }
  
  /* 暂停按钮样式 */
  .pause-btn {
    background-color: #ffa500 !important;
    border-color: #ff8c00 !important;
  }
  
  .pause-btn:hover {
    background-color: #ff8c00 !important;
  }
  
  /* 食物说明区域的样式 */
  .food-info {
    margin-top: 30px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 2px solid #ffb3d9;
  }
  
  .food-info h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.1em;
  }
  
  .food-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .food-item {
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    border: 1px solid #ffb3d9;
    font-size: 0.9em;
    color: #333;
  }
  
  /* 脉冲动画效果 */
  @keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
  }
  
  /* 清空排行榜按钮样式 */
  .clear-btn {
    background-color: #ff6b6b !important;
    border-color: #ff4757 !important;
  }
  
  .clear-btn:hover {
    background-color: #ff4757 !important;
  }
  
  /* 排行榜样式 */
  .leaderboard {
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    border: 2px solid #ffb3d9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .leaderboard h3 {
    margin: 0 0 20px 0;
    color: #333;
    text-align: center;
    font-size: 1.5em;
  }
  
  .no-records {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
  }
  
  .leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .leaderboard-item {
    display: grid;
    grid-template-columns: 50px 80px 1fr 120px;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ffb3d9;
    transition: all 0.3s;
  }
  
  .leaderboard-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .leaderboard-item.top-three {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-color: #ffb300;
  }
  
  .rank {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
    text-align: center;
  }
  
  .score {
    font-weight: bold;
    font-size: 1.1em;
    color: #ff4757;
    text-align: center;
  }
  
  .details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9em;
    color: #666;
  }
  
  .date {
    font-size: 0.8em;
    color: #999;
    text-align: right;
  }
  
  /* 方向按钮美化 */
  .arrows button {
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    background: #fff;
    border: 2px solid #ffb3d9;
    font-size: 1.2em;
    margin: 4px;
    transition: background 0.2s, transform 0.2s;
  }
  .arrows button:hover {
    background: #ffb3d9;
    color: #fff;
    transform: scale(1.1);
  }
  
  /* 难度选择和皮肤切换美化 */
  .difficulty-select, .skin-select {
    display: inline-block;
    margin: 0 10px 10px 0;
  }
  .difficulty-select button, .skin-select button {
    margin: 0 2px;
    border-radius: 8px;
    border: none;
    padding: 6px 14px;
    font-size: 0.95em;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: background 0.2s, color 0.2s;
  }
  .difficulty-select button:hover, .skin-select button:hover {
    opacity: 0.85;
  }
  
  /* 食物生成动画 */
  @keyframes food-pop {
    0% { transform: scale(0.2);}
    60% { transform: scale(1.2);}
    100% { transform: scale(1);}
  }
  
  /* 账号管理样式 */
  .account-section {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 2px solid #ffb3d9;
  }
  
  .login-btn, .register-btn, .logout-btn {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px;
    font-size: 0.9em;
  }
  
  .register-btn {
    background-color: #2196F3;
  }
  
  .logout-btn {
    background-color: #f44336;
  }
  
  .login-btn:hover, .register-btn:hover, .logout-btn:hover {
    opacity: 0.8;
  }
  
  /* 弹窗样式 */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .modal {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    min-width: 300px;
  }
  
  .modal h3 {
    margin: 0 0 20px 0;
    text-align: center;
    color: #333;
  }
  
  .modal input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
  }
  
  .modal input:focus {
    outline: none;
    border-color: #ffb3d9;
  }
  
  .modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  
  .modal-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
  }
  
  .modal-buttons button[type="submit"] {
    background-color: #4CAF50;
    color: white;
  }
  
  .modal-buttons button[type="button"] {
    background-color: #f44336;
    color: white;
  }
  
  .modal-buttons button:hover {
    opacity: 0.8;
  }
  </style>